const { defineConfig } = require("@vue/cli-service");
// const banners = require('./mock/banners.json')
const setupMock = require("./mock/index");

module.exports = defineConfig({
  transpileDependencies: true,
  // 修改配置文件都要重启项目
  // 开发服务器
  devServer: {
    // 开发服务器添加代理功能
    proxy: {
      // 前缀 ： 拦截带有 /api 请求路径，转发给目标服务器发送请求
      "/api": {
        target: "http://sph-h5-api.atguigu.cn", // 目标服务器
        changeOrigin: true, // 允许跨域
        // 路径是否需要重写，看接口文档中接口要不要这个请求前缀
        // pathRewrite:{
        //   '^/api':''
        // },
      },
    },
    /*
      场景：后端未开发好的时候，前端需要模拟mock数据发送请求（和后端协商数据结构）
        1.正常是写一个服务器，配置路由，得到数据
        2.现在我们在开发服务器中 写中间件 去配置路由
      场景2：mock模拟数据添加路由不止一个，除了 '/mock/getBanners' 还有 '/mock/getTest' 等
      - 都是在开发服务器中去配置路由 那么就不应该写一样的逻辑
      - 封装一个mock模块化添加路由
      - 在devServer中调用封装mock模块化添加路由的函数
    */

    // 提供在服务器内部执行所有其他中间件之前执行自定义中间件的能力
    // function (devServer)
    onBeforeSetupMiddleware: function (devServer) {
      // app 相当于express中的app应用  const app = express();  app可以配置路由写中间件

      // 在devServer上搭建新的路由
      // 当你向devServer发送请求时，满足条件的请求会被路由拦截，返回mock数据
      // devServer.app.get('/mock/getBanners', function (req, res) {
      //   // res.send()
      //   res.json({
      //     code:200,
      //     message:'',
      //     success:true,
      //     data:banners,
      //    });
      // });

      setupMock(devServer.app);
    },
  },
});
